<template>
  <el-table :data="filterTableData" style="width: 100%">
    <el-table-column label="id" prop="userId" />
    <el-table-column label="用户名" prop="username" />
    <el-table-column label="性别" prop="sex" />
    <el-table-column label="邮箱" prop="email" />
    <el-table-column label="任务数" prop="taskNum" />
    <el-table-column label="等级" prop="grade" />
    <el-table-column label="经验值" prop="experience" />
    <el-table-column label="签名" prop=" signature" />
    <el-table-column label="头像" prop="avatar" />

    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="small" placeholder="搜索" />
      </template>
      <template #default="scope">
        <el-button size="small" type="primary" plain @click="handleEdit(scope.$index, scope.row)">
          编辑
        </el-button>
        <el-button
            size="small"
            type="danger"
            plain
            @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>

  </el-table>
  <template>
    <el-pagination background layout="prev, pager, next" :total="1000" />
  </template>
</template>


<script lang="ts" setup>
import {computed, getCurrentInstance, ref} from 'vue'
const {appContext: {config: {globalProperties: global}}} = getCurrentInstance();//3.0.11
interface User {
  userId: BigInteger
  username: string
  email: string
  sex: string
  taskNum: BigInteger
  grade: string
  signature: string
  avatar: string
}

const search = ref('')
const filterTableData = computed(() =>
    tableData.value.filter(
        (data) =>
            !search.value ||
            data.username.toLowerCase().includes(search.value.toLowerCase())
    )
)
const handleEdit = (index: number, row: User) => {

  console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
  global.$request.get("/user/deleteUserById?userId="+row.userId).then(res => {
    findAllUsers()
  })
}

const tableData = ref<User[]>([]) // 使用 ref 创建响应式数组
findAllUsers();
function findAllUsers() {
  global.$request.get("/user/findAllUsers?pageNum=1&pageSize=100").then(res => {
    //注释
    tableData.value = res.data;
  })
}
</script>